<template>
	<view class="pb130">
		<block v-for="(v,i) in arr" :key='i'>
			<mg-cell cname="23" isr="1" :img='v.icon' w='64' h='64' brs='5rpx' :btt='v.name' bttc='f26 c3'
				:bbt="`ID: ${v.id}  排序: ${v.sort||''}`">
				<view slot='ft' class="f-y-c">
					<switch @change="flkg(v,$event)" :checked="v.display==1" :color="fColor"></switch>
					<view @click="sz(1,v,v)" class="b-df bs10 p-5-20 f26 c3 ml20">设置</view>
				</view>
			</mg-cell>
			<mg-cell cname="p03" v-if="v.children.length" isr="1">
				<view slot='bd' class="f-s f24">
					<view @click="zksq(i)" class="p20 f-y-c mr20">
						<text :class="v.s?'cf7c':'c9'">{{v.s?'收起':'展开'}}</text>
						<text class="iconfont icondown f24 ml10 rowxx" :class="{rowshow:v.s,cf7c:v.s}"></text>
					</view>
					<view class="f-1">
						<block v-for="(sv,si) in v.children" :key='si'>
							<mg-cell v-if="si==0||v.s&&si>0" :last="si==v.children.length-1" cname="p20" isl="1"
								:img='sv.icon' w='64' h='64' brs='5rpx' :btt='sv.name' bttc='f26 c3'
								:bbt="`ID: ${sv.id}  排序: ${sv.sort||''}`">
								<view slot='ft' class="f-y-c">
									<switch @change="flkg(sv,$event)" :checked="sv.display==1" :color="fColor"></switch>
									<view @click="sz(2,sv)" class="b-df bs10 p-5-20 f26 c3 ml20">设置</view>
								</view>
							</mg-cell>
						</block>
					</view>
				</view>
				<view></view>
			</mg-cell>
		</block>
		<view class="foot-btnc mt30">
			<button @click="xjfl" class="foot-btn2" hover-class="btnhc" :style="{background:fColor}">新建一级分类</button>
		</view>
		<mg-as v-model="show" :list='list' @con='asdj'></mg-as>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mgAs from '@/components/form/mg-as.vue'
	import mgModal from '@/components/common/modal.vue'
	import mgInput from '@/components/form/mg-input.vue'
	import mgPhoto from '@/components/form/mg-photo.vue'
	import utils from '@/common/utils.js'
	import {
		uploadImg
	} from '@/common/wechat-util.js'
	export default {
		name: 'flsz',
		components: {
			mgAs,
			mgModal,
			mgInput,
			mgPhoto,
		},
		data() {
			return {
				arr: [],
				show: false,
				list: [{
					n: '编辑',
					t: 'bj',
				}, {
					n: '新增二级分类',
					t: 'xz',
					hide: false,
				}, {
					n: '删除',
					t: 'sc',
					c: '#F77C00'
				}],
				showtc: false,
				params: {
					id: '',
					sort: '',
					name: '',
					icon: '',
					pid: '',
				},
				uploadpt: {
					mark: '0',
					pkey: 'icon',
					w: '174rpx',
					max: '1',
					fileList: [],
					uploadList: [],
				},
				loading: false,
			}
		},
		onLoad(options) {
			// //gc
			// function Gc() {
			// 	return {
			// 		name: {
			// 			sx: 1
			// 		}
			// 	}
			// }
			// let gc1 = new Gc(),
			// 	gc2 = new Gc()
			// gc1.age = 1
			// gc1.name.sx = 2
			// console.log(gc1, gc2)
			// //gzhs
			// function Gzhs(name) {
			// 	this.name = name
			// 	this.age = 10
			// 	this.say = function() {
			// 		console.log('Gzhs say', this.name + this.age)
			// 	}
			// }
			// let gzhs1 = new Gzhs('张三'),
			// 	gzhs2 = new Gzhs('李四')
			// gzhs1.age = 20
			// gzhs1.say()
			// gzhs2.say()
			// console.log(gzhs1, gzhs2)
			// //yx
			// function Yx() {

			// }
			// Yx.prototype.name = "bill";
			// Yx.prototype.address = "GuangZhou";
			// Yx.sayName = function() {
			// 	console.log(this.name)
			// }
			// let yx1 = new Yx(),
			// 	yx2 = new Yx()
			// yx1.name = 'abc'
			// // yx1.sayName()
			// // yx2.sayName()
			// console.log(yx1, yx2)
			// //yxjc
			// function Parent() {
			// 	this.name = ['1', '2']
			// 	this.age = 18
			// }

			// function Child() {

			// }
			// Child.prototype = new Parent()
			// let ch1 = new Child(),
			// 	ch2 = new Child()
			// ch1.age = 20
			// ch1.name.push('33')
			// console.log(ch1, ch2)
			// //zhjc
			// try {
			// 	function ZhParent(age) {
			// 		this.names = ["aa", "bb", "cc"]
			// 		this.age = age;
			// 	}

			// 	ZhParent.prototype.sayName = function() {
			// 		console.log(this.names);
			// 	}

			// 	function ZhChild() {
			// 		ZhParent.call(this, 18); // 第一次调用
			// 	}

			// 	ZhChild.prototype = new ZhParent(); // 第二次调用：通过原型链继承 sayName 方法
			// 	ZhChild.prototype.constructor = ZhChild; // 改变 constructor 为子类型构造函数

			// 	var child1 = new ZhChild();
			// 	// child1.sayName();
			// 	// child1.names.push("dd");
			// 	console.log(child1);

			// 	var child2 = new ZhChild();
			// 	// console.log(child2.names);
			// 	console.log(child2);
			// 	// child2.sayName();

			// } catch (e) {
			// 	console.log(e)
			// 	//TODO handle the exception
			// }
			this.query = options
			// this.getSystem()
			this.util.setNT('管理分类')
			this.refreshList()
		},
		onShow() {
			if (this.isload) {
				this.refreshList()
			} else {
				this.isload = true
			}
		},
		computed: {},
		methods: {
			async refreshList() {
				let {
					data
				} = await this.util.request({
					'url': this.api.spfllb,
					data: {
						type: this.query.type,
						size: 0,
					},
				})
				this.arr = data
			},
			changeImg(e) {
				this.uploadpt.uploadList = this.params[e.pkey] = e.p
			},
			zksq(i) {
				this.$set(this.arr[i], 's', this.arr[i].s ? 0 : 1)
			},
			sz(t, v, pv) {
				if (t == 1) {
					this.list[1].hide = false
				} else {
					this.list[1].hide = true
				}
				this.show = true
				this.flInfo = {
					t,
					v,
					pv,
				}
			},
			async asdj(v) {
				let obj
				switch (v.t) {
					case 'bj':
						this.go({
							url: 'fbsp-fl?type=' + this.query.type + '&id=' + this.flInfo.v.id
						})
						this.show = false
						return;
					case 'xz':
						this.go({
							url: 'fbsp-fl?type=' + this.query.type + '&id=' + this.flInfo.v.id + '&pid=' + this
								.flInfo.pv.id
						})
						this.show = false
						// this.params = {
						// 	id: '',
						// 	sort: '',
						// 	name: '',
						// 	icon: '',
						// 	pid: '',
						// }
						// if (this.flInfo.v) this.params.pid = this.flInfo.v.id
						// this.uploadpt.fileList = ['']
						// this.uploadpt.uploadList = []
						// setTimeout(() => {
						// 	this.uploadpt.fileList = []
						// 	this.params.icon = ''
						// 	this.showtc = true
						// }, 100)
						return;
					case 'sc':
						this.show = false
						obj = {
							title: `您确认删除吗？`,
							url: 'scspfl',
							params: {
								id: this.flInfo.v.id,
							}
						}
						break;
				}
				try {
					await this.util.modal(obj.title)
					this.show = false
					let data = await this.util.request({
						'url': this.api[obj.url],
						method: 'POST',
						mask: 1,
						data: obj.params,
					})
					if (data) {
						this.util.message('操作成功', 1)
						this.refreshList()
					}
				} catch (e) {}
				// console.log(v, this.flInfo)
			},
			xjfl() {
				this.go({
					url: 'fbsp-fl?type=' + this.query.type
				})
			},
			async save() {
				let arr = []
				// console.log(this.params, this.flInfo)
				if (this.flInfo.t == 3) {
					arr = ['id', 'pid']
					// console.log('xzyj')
				} else {
					if (this.flInfo.t == 1) {
						if (this.params.id == '') {
							arr = ['id']
							// console.log('xzej')
						} else {
							arr = ['pid']
							// console.log('yjbj')
						}
					} else {
						arr = ['pid']
						// console.log('ejbj')
					}
				}
				let judgeData = utils.isFailParams({
					field: this.params,
					filter: arr,
					tips: {
						id: '缺少分类id',
						sort: '请输入排序',
						name: '请输入名称',
						icon: '请上传图标',
						pid: '缺少一级分类id',
					}
				})
				if (!judgeData) {
					return
				} else {
					this.loading = true
					uploadImg({
						files: this.uploadpt.uploadList
					}).then(async fres => {
						this.params.icon = fres.toString()
						let res = await this.util.request({
							'url': this.api.SaveGoodsType,
							method: 'POST',
							mask: 1,
							data: this.params,
						})
						if (!res) {
							this.loading = false
						} else {
							this.util.message('保存成功', 1, 1000)
							this.showtc = false
							this.refreshList()
							this.loading = false
						}
					})
				}
			},
			async flkg(v, e) {
				let data = await this.util.request({
					'url': this.api.kgspfl,
					method: 'POST',
					mask: 1,
					data: {
						id: v.id,
						display: e.detail.value ? 1 : 2
					}
				})
				if (data) {
					this.util.message('操作成功', 1)
					this.refreshList()
				}
				// console.log(v, e.detail.value)
			},
		},
	}
</script>
<style scoped lang="scss">
	.ggx {
		top: 20rpx;
		right: 20rpx;
	}

	switch {
		transform: scale(0.82)
	}
</style>
